<template>
  <div style="display: flex;flex-direction: column;width:100%;height:100%;text-align: -webkit-auto;">

    <div style="height:10%;" class="yi">
      <van-icon
        name="arrow-left"
        fixed="true"
        @click="fanhui"></van-icon>
      <div>
        <van-icon
          name="shop-o"></van-icon>
          <span class="yiyi">帮我买</span>
        <van-icon
          name="arrow-down"></van-icon>
      </div>
      <van-icon
        name="chat"></van-icon>
    </div>

    <div style="flex: 1;overflow-y: auto;" class="er">

      <div class="erer">
      <div style="margin-left: 2px;border:0; font-size:12px;">
      	<div class="er21">家的地址</div>
      	<div class="er22">常用地址</div>
      	
      </div>
        <router-link to="/shdzfb">
      <p style="margin-left: 5%;margin-top: 9%;float:left;">请选择收货地址</p>
        </router-link>
     </div>

      <div class="ersi">
        <router-link to="/gmsjfb">
          <input type="text" placeholder="购买时间：" id="m" >
          <span style="border:0;float: left;color:#ccc;    margin-top: 5%;display: inline-block;">立即购买
        </span>
        </router-link>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erwu">
        <router-link to="/yhfb">
          <input type="text" placeholder="优惠券选择：" id="y" >
          <span style="border:0;float: left;color:#ccc;    margin-top: 5%;display: inline-block;">新用户立减20元
        </span>
        </router-link>
        <van-icon
          name="arrow"></van-icon>
      </div>

      <div class="erwu">
          <input type="text" placeholder="商品价格" id="g" >
          <span style="border:0;float: left;color:#ccc;    margin-top: 5%;display: inline-block;">
        </span>
        <van-icon
          name="gold-coin-o"></van-icon>
      </div>

    </div>



  </div>
</template>

<script>
  export default {
    name:'Spjgfb',
    data() {
      return {

      }
    },
    methods: {
      fanhui(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .yi{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-icon-chat{
    margin-right: 15px;
  }
  .van-icon-arrow-left{
    margin-left: 15px;
  }
  .er{
    background: #f2eef4;

  }
  .erer{
    width:90%;
    height:100px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
  }
  .van-icon-arrow{
    float: right;
    line-height: 60px;
    margin-right: 5%;
  }
  .ersi{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin-left: 5%;
    border:0;
    font-size: 12px;

  }
  .er21{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    float:left;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    margin-left: 10%;
  }
  .er22{
    width:100px;
    height:22px;
    border-radius: 4px;
    font-size:12px;
    border:1px solid #ccc;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    margin-right: 10%;
    float:right;
  }
  .er .van-icon-arrow{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .van-icon-gold-coin-o{
    float:right;
    line-height: 60px;
    margin-right: 5%;
  }
  .erwu{
    width:90%;
    height:60px;
    background:#fff;
    border-radius: 4px;
    margin: 4% 0 4% 5%;
    border:0;
    font-size: 12px;
  }
  .erwu .van-icon-gold-coin{
    float: right;
    line-height: 60px;
    margin-right: 5%;
  }
  #y{width: 20%; border:0; float:left;margin-left: 6%;margin-top: 5%;}
  #m{width: 20%; border:0; float:left;margin-left: 6%;margin-top: 5%;}
  #g{width: 20%; border:0; float:left;margin-left: 6%;margin-top: 5%;}
</style>
